<template>
  <!-- <el-form-item label="选择商品:"> -->
  <el-select v-model="state" v-loadmore="handleScroll" filterable remote :remote-method="remoteMethod"
    :change="changeSelect">
    <el-option v-for="item in productList" :key="item.productId" :label="item.title" :value="item.productId">
      <div class="name">{{ item.title }} （{{ item.productId }}）</div>
    </el-option>
  </el-select>

  <!-- <button @click="test">
      ces
    </button>
  </el-form-item> -->

</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      slectloading: false, //搜索下拉菜单
      productList: [], //案件数据
      state: "",
      currPage: 1,
      pageSize: 10,
      paramsKey: '',
    }
  },
  created() {
    this.getDataList()
  },
  methods: {

    test() {
      console.log(this.state);

    },
    handleScroll() {
      console.log('触底了')
      console.log(this.currPage, this.totalCount)
      if (this.productList.length < this.totalCount) {
        this.slectloading = true
        this.getDataList() //获取方法
        this.slectloading = false
      }
    },

    // 获取数据列表
    async getDataList() {
      return await this.$http({
        url: this.$http.adornUrl('/product/product/list'),
        method: 'get',
        params: this.$http.adornParams({
          'key': this.paramsKey,
          'page': this.currPage,
          'limit': this.pageSize,

        })
      }).then(({ data }) => {
        console.log("获取商品列表成功", data);

        if (data && data.code === 200) {
          // 过滤掉已经存在的商品
          console.log("过滤掉已经存在的商品", data.data);

          const newProducts = data.data.list.filter(newItem => !this.productList.some(item => item.productId === newItem.productId));
          console.log("newProducts", newProducts);

          this.productList.push(...newProducts);

          this.totalCount = data.data.totalCount
          this.currPage = this.currPage + 1
        } else {
          return []
        }
      })
    },
    // 关联案件下拉菜单远程搜索
    remoteMethod(val) {
      this.paramsKey = val
      console.log('远程搜索', val)

      this.currPage = 1
      this.productList = []
      this.totalCount = 0
      this.pageSize = 10

      this.$http({
        url: this.$http.adornUrl('/product/product/list'),
        method: 'get',
        params: this.$http.adornParams({
          'key': val,
          'page': this.currPage,
          'limit': this.pageSize,
        })
      }).then(({ data }) => {
        console.log("获取商品列表成功", data);

        if (data && data.code === 200) {


          // 过滤掉已经存在的商品
          const newProducts = data.data.list.filter(newItem => !this.productList.some(item => item.productId === newItem.productId));
          this.productList.push(...newProducts);
          this.totalCount = data.data.totalCount
          this.currPage = this.currPage + 1
        } else {
          return []
        }
      })
      this.slectloading = true
    },

    changeSelect(val) {
      console.log('选择的案件', val)
      // this.state = val.productId
    }
  },


  watch: {
    value(newVal, oldVal) {
      // 当更新后的值是大于0，就是合法值，则查询数据更新
      if (newVal != 0) {

        console.log("新值", newVal);

        this.$http({
          url: this.$http.adornUrl(`/product/product/info/${newVal}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 200) {
            // 检查 productList 中是否存在相同 productId 的商品
            console.log("获取商品详情成功", data);
            const exists = this.productList.some(item => {

              console.log("item.productId", item);
              console.log("data.data.", data.data);



              return item.productId === data.data.productId
            });
            if (!exists) {
              this.productList.push(data.data);
            }


            this.state = data.data.productId
            console.log('data.product', data.data);
            console.log("this.state", this.state);

          }
        })

        return

      }


      // 为0表示恢复默认值
      console.log("新值", 0);

      this.state = undefined
    },


    state(newVal, oldVal) {

      this.$emit('input', newVal)
    }
  },
}

</script>

<style lang="scss"></style>
